<template>
  <div class="engineeringSourcing">
    <div class="myFixed">
      <PageTitle
        :goBack="true"
        title="供应商详情"
        :border="true"
        :back-type="false"
        @go-back="backList"
      />
      <a-tabs v-model:activeKey="activeKey" @change="changeActiveKey">
        <a-tab-pane :key="2" tab="内部合作信息" />
        <a-tab-pane :key="1" tab="外部公开信息">
          <iframe class="iframeDetail" id="companyIframe" width="100%" :src="iframeUrl"></iframe>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div v-show="activeKey === 2">
      <div class="myCardCss" style="overflow: auto;padding-top: 100px;">
        <PageTitle
          :goBack="false"
          title="供应商合作记录"
          :border="false"
          :level="2"
          :padding="false"
        />
        <a-table
          :dataSource="hzList"
          :columns="hzColumns"
          :pagination="false"
          style="margin-top: 8px"
          :scroll="{ x: 1000 }"
        >
          <template #index="{ index }">
            {{ (pageFormByHz.limit - 1) * pageFormByHz.size + index + 1 }}
          </template>
          <template #companyName="{ record }">
            <label style="color: #1473dc; cursor: pointer">{{ record.companyName }}</label>
          </template>
        </a-table>
        <a-pagination
          size="small"
          :total="pageFormByHz.total"
          :pageSize="pageFormByHz.size"
          :current="pageFormByHz.limit"
          :hideOnSinglePage="true"
          @change="changePageByHz"
          style="margin-top: 10px; float: right"
        />
      </div>
      <div class="myCardCss" style="margin-top: 12px;">
        <PageTitle :goBack="false" title="供应商标签" :border="false" :level="2" :padding="false" />
        <a-radio-group v-model:value="tagTabs" @change="changeTagTabs">
          <a-radio-button :value="1" style="text-align: center">供应商标签</a-radio-button>
          <a-radio-button :value="2" style="text-align: center">历史供应商标签</a-radio-button>
        </a-radio-group>
        <div class="addTagBtn all-4-border" @click="openAddLabel" v-if="tagTabs === 1"
        >添加标签</div
        >
        <a-table
          :dataSource="tagList"
          :columns="tagColumns"
          :pagination="false"
          style="margin-top: 8px"
        >
          <template #index="{ index }">
            {{ index + 1 }}
          </template>
          <template #createUserId="{ record }">
            {{ record.createUserId ? record.createUserId?.name : '' }}
          </template>
          <template #operation="{ record }">
            <!-- <a-popconfirm
              :title="'是否确定' + tagTabs === 1 ? '移除？' : '删除？'"
              ok-text="是"
              cancel-text="否"
              @confirm="confirmDelByTag(record.id)"
            > -->
            <a v-if="tagTabs === 1" style="color: #1473dc" @click="openDelBox(record.id)">移除</a>
            <a v-if="tagTabs === 2" @click="openDelBox(record.id)">删除</a>
            <!-- <a style="color: #1473dc" @click="openDelBox(record.id)">取消监控</a> -->
            <!-- </a-popconfirm> -->
          </template>
        </a-table>
      </div>
      <div class="myCardCss" style="margin-top: 12px; overflow: auto">
        <PageTitle
          :goBack="false"
          title="供应商评分记录"
          :border="false"
          :level="2"
          :padding="false"
        />
        <a-table
          :dataSource="recordList"
          :columns="recordColumns"
          :pagination="false"
          style="margin-top: 8px"
        >
          <template #index="{ index }">
            {{ (pageFormByRecord.limit - 1) * pageFormByRecord.size + index + 1 }}
          </template>
          <template #createUser="{ record }">
            {{ record.createUserId ? record.createUserId?.name : '' }}
          </template>
          <template #operation="{ record }">
            <a style="color: #1473dc" @click="viewScoreResult(record)">下载查看</a>
          </template>
        </a-table>
        <a-pagination
          size="small"
          :total="pageFormByRecord.total"
          :pageSize="pageFormByRecord.size"
          :current="pageFormByRecord.limit"
          :hideOnSinglePage="true"
          :showSizeChanger="false"
          @change="changePageByRecord"
          style="margin-top: 10px; float: right"
        />
      </div>
    </div>
    <a-modal
      v-if="isShowAddLabel"
      v-model:visible="isShowAddLabel"
      :maskClosable="false"
      :width="420"
      :centered="true"
      okText="确认添加"
      title="添加标签"
      @ok="saveLabelData"
      :destroyOnClose="true"
    >
      <a-form
        ref="addLabelRef"
        :model="addLabelForm"
        :label-col="{ span: 8 }"
        :wrapper-col="12"
        style="margin-top: 16px"
      >
        <a-form-item
          label="标签名称"
          name="name"
          :rules="[{ required: true, message: '请输入标签名称' }]"
        >
          <a-input
            v-model:value="addLabelForm.name"
            placeholder="请输入标签名称"
            style="width: 240px"
          />
        </a-form-item>
        <a-form-item label="添加依据">
          <a-textarea
            v-model:value="addLabelForm.description"
            placeholder="请输入添加依据"
            :rows="4"
            style="width: 240px"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <DeleteBox
      :is-show="isShowDelBox"
      :ok-text="'确认取消'"
      :cancel-text="'我再想想'"
      :prompt-text="'取消后将错过企业最新动态！'"
      @ok="returnOk"
      @cancel="isShowDelBox = false"
    />
    <!-- 评分结果弹窗 -->
    <score-result-dialog
      v-model:open-status="scoreResultDialog"
      @ok="scoreResultOk"
      @update:open-status="scoreResultClose"
      :pdf-url="pdfUrl"
    />
  </div>
</template>
<script lang="ts" setup>
  import DeleteBox from '/@/components/DeleteBox/index.vue';
  import { onMounted,onUnmounted, ref } from 'vue';
  import PageTitle from '/@/components/PageTitle/index.vue';
  import { useRoute } from 'vue-router';
  import { getCompanyInfoUrl, getProjectUrl } from '/@/api/sourcingBigData';
  import { getProjectLedger } from '/@/api/supplierManage';
  import {
    addModel,
    getScoreList,
    downloadRecordPdfApi,
    exportRecord,
  } from '/@/api/supplierRating';
  import {
    addLabel,
    delLabel,
    getLabelHistoryList,
    getLabelList,
    removeLabel,
  } from '/@/api/labelTag';
  import { message } from 'ant-design-vue';
  import { getPlugData, formatCompanyId } from '/@/utils/encodeStr';
  import { steerScroll } from '/@/utils/jskplug';
  import { saveAs } from 'file-saver';
  import ScoreResultDialog from '/@/views/supplierRating/ratingList/components/ScoreResultDialog.vue';

  const addLabelRef: any = ref(null);

  onUnmounted(() => {
    // 监听滚动（iframe的id、页面排除iframe后页面剩下高度[例:80]、增加监听[不传就是移除监听]、父级id[不带默认就是铺满整个页面]]）
    // steerScroll('companyIframe', navigation, footHeight, '', '', '', plugData, this, '会员', true);
  });
  let isShowDelBox = ref(false);
  let delId = '';
  function openDelBox(id: string) {
    isShowDelBox.value = true;
    delId = id;
  }
  function returnOk() {
    isShowDelBox.value = false;
    confirmDelByTag(delId);
  }
  const props = defineProps({
    // 供应商id
    companyId: {
      type: String,
      default: '',
    },
  });
  const emit = defineEmits(['goBack']);
  function backList() {
    emit('goBack');
  }

  let activeKey = ref(2);
  let iframeUrl = ref('');
  function changeActiveKey() {
    if (activeKey.value === 1 && !iframeUrl.value) {
      getUrl()
    }
  }

  let footHeight = 0;
  let navigation = { isFixed: true, fixedHeight: 0, totalHeight: 0 }; // iframe之外页面顶部对象，ifFixed:是否浮动；fixedHeight：浮动对象高度；totalHeight：顶部整体高度
  let plugData = { domain: '', param: '' }; // 插件相关信息
  let companyId = props.companyId;
  let pageFormByRecord = ref({
    size: 10,
    limit: 1,
    total: 0,
  });
  let pageFormByHz = ref({
    size: 10,
    limit: 1,
    total: 0,
  });
  // getUrl();
  getTableData()
  async function getTableData() {
    await getDataByTag()
    await getDataByRecord()
    await getDataByHz()
    if (!tagList.value.length && !recordList.value.length && !hzList.value.length) {
      activeKey.value = 1
      getUrl()
    }
  }
  async function getUrl() {

    let queryData = {
      companyId: companyId,
    };
    const res = await getCompanyInfoUrl(queryData);
    plugData = getPlugData(res, '/company/');
    // iframeId: iframe的id；navigation:页面排除iframe后剩下的顶部高度；footHeight: 页面排除iframe后剩下的底部高度；state:监听or移除监听；parentId: 父级id[不带默认就是铺满整个页面]];parent:父级;plugData:插件相关url信息;_this:指向当前实例（可忽略）;serviceHotline:开通会员类型
    steerScroll(
      'companyIframe',
      navigation,
      footHeight,
      true,
      '',
      '',
      plugData,
      this,
      '会员',
      true,
    );
    const url = formatCompanyId(res);
    // console.log(url,"urlurlurl")
    iframeUrl.value = url;

    // window.location.href=url
  }

  let pageFormByTag = ref({
    size: 10,
    limit: 1,
    total: 0,
  });
  function changePageByTag(val) {
    pageFormByTag.value.limit = val;
    // todo
    getDataByTag();
  }

  function changePageByRecord(val) {
    pageFormByRecord.value.limit = val;
    // todo
    getDataByRecord();
  }

  function changePageByHz(val) {
    pageFormByHz.value.limit = val;
    // todo
    getDataByHz();
  }

  let tagTabs = ref(1); // 1:供应商标签 2:历史供应商标签
  let tagList = ref([]); // 标签列表
  let recordList = ref([]); // 评分记录列表
  let hzList = ref([]); // 合作记录列表
  let tagColumns = ref([
    {
      title: '序号',
      align: 'center',
      slots: { customRender: 'index' },
    },
    {
      title: '标签',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '添加人',
      dataIndex: 'createUserId',
      key: 'createUserId',
      align: 'center',
      slots: { customRender: 'createUserId' },
    },
    {
      title: '添加依据',
      dataIndex: 'description',
      key: 'description',
      align: 'center',
    },
    {
      title: '添加时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      slots: { customRender: 'operation' },
      align: 'center',
    },
  ]);
  let recordColumns = ref([
    {
      title: '序号',
      align: 'center',
      slots: { customRender: 'index' },
    },
    {
      title: '得分',
      dataIndex: 'score',
      key: 'score',
      align: 'center',
    },
    {
      title: '评分时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
    },
    {
      title: '评分模型',
      dataIndex: 'modelName',
      key: 'modelName',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      slots: { customRender: 'operation' },
      align: 'center',
    },
  ]);
  let hzColumns = ref([
    {
      title: '序号',
      align: 'center',
      fixed: true,
      width: '50px',
      slots: { customRender: 'index' },
    },
    {
      title: '项目公司名称',
      dataIndex: 'companyName',
      key: 'companyName',
      align: 'center',
      fixed: true,
      width: '300px',
      slots: { customRender: 'companyName' },
    },
    {
      title: '年份',
      dataIndex: 'year',
      key: 'year',
      align: 'center',
      width: '200px',
    },
    {
      title: '计划名称',
      dataIndex: 'planName',
      key: 'planName',
      align: 'center',
      width: '200px',
    },
    {
      title: '采购依据（立项）',
      dataIndex: 'procurementBasis',
      key: 'procurementBasis',
      align: 'center',
      width: '200px',
    },
    {
      title: '计划类型',
      dataIndex: 'planType',
      key: 'planType',
      align: 'center',
      width: '200px',
    },
    {
      title: '专业板块',
      dataIndex: 'professionalSection',
      key: 'professionalSection',
      align: 'center',
      width: '200px',
    },
    {
      title: '项目阶段',
      dataIndex: 'projectPhase',
      key: 'projectPhase',
      align: 'center',
      width: '200px',
    },
    {
      title: '标包名称',
      dataIndex: 'packageName',
      key: 'packageName',
      align: 'center',
      width: '200px',
    },
    {
      title: '标的物类别',
      dataIndex: 'targetCategory',
      key: 'targetCategory',
      align: 'center',
      width: '200px',
    },
    {
      title: '概（预）算金额（万元）',
      dataIndex: 'budgetAmount',
      key: 'budgetAmount',
      align: 'center',
      width: '200px',
    },
    {
      title: '采购与招标管理机构',
      dataIndex: 'procurementAgencyType',
      key: 'procurementAgencyType',
      align: 'center',
      width: '200px',
    },
    {
      title: '采购方式',
      dataIndex: 'procurementMethod',
      key: 'procurementMethod',
      align: 'center',
      width: '200px',
    },
    {
      title: '是否为供应商短名单采购',
      dataIndex: 'onSupplierShortlist',
      key: 'onSupplierShortlist',
      align: 'center',
      width: '200px',
    },
    {
      title: '评审方式',
      dataIndex: 'evaluationMethod',
      key: 'evaluationMethod',
      align: 'center',
      width: '200px',
    },
    {
      title: '采购代理机构名称',
      dataIndex: 'procurementAgencyName',
      key: 'procurementAgencyName',
      align: 'center',
      width: '200px',
    },
    {
      title: '招标（非招标）编号',
      dataIndex: 'tenderNumber',
      key: 'tenderNumber',
      align: 'center',
      width: '200px',
    },
    {
      title: '实际开标/询价/竞价/谈判时间',
      dataIndex: 'bidOpeningDate',
      key: 'bidOpeningDate',
      align: 'center',
      width: '200px',
    },
    {
      title: '二次挂网时间',
      dataIndex: 'secondPostingDate',
      key: 'secondPostingDate',
      align: 'center',
      width: '200px',
    },
    {
      title: '实际开标/询价/竞价/谈判时间',
      dataIndex: 'bidOpeningDate',
      key: 'bidOpeningDate',
      align: 'center',
      width: '200px',
    },
    {
      title: '三次挂网时间',
      dataIndex: 'thirdPostingDate',
      key: 'thirdPostingDate',
      align: 'center',
      width: '200px',
    },
    {
      title: '实际开标/询价/竞价/谈判时间',
      dataIndex: 'bidOpeningDate',
      key: 'bidOpeningDate',
      align: 'center',
      width: '200px',
    },
    {
      title: '最高限价（万元）',
      dataIndex: 'maximumPrice',
      key: 'maximumPrice',
      align: 'center',
      width: '200px',
    },
    {
      title: '首选中标人',
      dataIndex: 'firstChoiceBidder',
      key: 'firstChoiceBidder',
      align: 'center',
      width: '200px',
    },
    {
      title: '备选中标人',
      dataIndex: 'secondChoiceBidder',
      key: 'secondChoiceBidder',
      align: 'center',
      width: '200px',
    },
    {
      title: '排序第三候选人（如有）',
      dataIndex: 'thirdChoiceBidder',
      key: 'thirdChoiceBidder',
      align: 'center',
      width: '200px',
    },
    {
      title: '定标时间',
      dataIndex: 'awardDate',
      key: 'awardDate',
      align: 'center',
      width: '200px',
    },
    {
      title: '定标会议',
      dataIndex: 'awardMeeting',
      key: 'awardMeeting',
      align: 'center',
      width: '200px',
    },
    {
      title: '是否有异议或投诉',
      dataIndex: 'objectionsOrComplaints',
      key: 'objectionsOrComplaints',
      align: 'center',
      width: '200px',
    },
    {
      title: '中标通知书下发时间',
      dataIndex: 'awardNotificationDate',
      key: 'awardNotificationDate',
      align: 'center',
      width: '200px',
    },
    {
      title: '中标/中选金额（万元）',
      dataIndex: 'winningAmount',
      key: 'winningAmount',
      align: 'center',
      width: '200px',
    },
    {
      title: '中标人',
      dataIndex: 'winningBidder',
      key: 'winningBidder',
      align: 'center',
      width: '200px',
    },
    {
      title: '是否招标转谈判采购',
      dataIndex: 'biddingToNegotiation',
      key: 'biddingToNegotiation',
      align: 'center',
      width: '200px',
    },
    {
      title: '合同编号',
      dataIndex: 'contractNumber',
      key: 'contractNumber',
      align: 'center',
      width: '200px',
    },
    {
      title: '合同签订时间',
      dataIndex: 'contractSigningDate',
      key: 'contractSigningDate',
      align: 'center',
      width: '200px',
    },
    {
      title: '工期（服务期）起止时间',
      dataIndex: 'projectPeriodStartDate',
      key: 'projectPeriodStartDate',
      align: 'center',
      width: '200px',
    },
    {
      title: '合同价格（万元）',
      dataIndex: 'contractPrice',
      key: 'contractPrice',
      align: 'center',
      width: '200px',
    },
    {
      title: '其中备用金（万元）',
      dataIndex: 'contingencyFund',
      key: 'contingencyFund',
      align: 'center',
      width: '200px',
    },
    {
      title: '合同变更金额（万元）',
      dataIndex: 'contractAmendmentAmount',
      key: 'contractAmendmentAmount',
      align: 'center',
      width: '200px',
    },
    {
      title: '合同结算金额（万元）',
      dataIndex: 'contractSettlementAmount',
      key: 'contractSettlementAmount',
      align: 'center',
      width: '200px',
    },
    {
      title: '合同是否履行完成',
      dataIndex: 'contractCompletion',
      key: 'contractCompletion',
      align: 'center',
      width: '200px',
    },
    {
      title: '合同会签发起时间',
      dataIndex: 'contractInitiationDate',
      key: 'contractInitiationDate',
      align: 'center',
      width: '200px',
    },
    {
      title: '合同经办人员',
      dataIndex: 'contractHandler',
      key: 'contractHandler',
      align: 'center',
      width: '200px',
    },
    {
      title: '工期（服务期）起止时间',
      dataIndex: 'projectPeriodStartDate',
      key: 'projectPeriodStartDate',
      align: 'center',
      width: '200px',
    },
    {
      title: '单一来源理由及依据',
      dataIndex: 'projectPeriodStartDate1',
      key: 'projectPeriodStartDate1',
      align: 'center',
      width: '200px',
    },
  ]);
  async function getDataByTag() {
    let queryData = {
      companyId: companyId,
    };
    const res = await getLabelList(queryData);
    tagList.value = res;
  }
  // 历史标签列表
  async function getDataByHistoryTag() {
    let queryData = {
      companyId: companyId,
    };
    const res = await getLabelHistoryList(queryData);
    tagList.value = res;
  }
  async function getDataByRecord() {
    let queryData = {
      companyIds: companyId,
      limit: pageFormByRecord.value.limit,
      size: pageFormByRecord.value.size,
    };
    const res = await getScoreList(queryData);
    recordList.value = res.list.map((item) => {
      const obj = { ...item };
      for (let key in obj) {
        if (obj[key] === null || obj[key] === undefined) {
          obj[key] = '-';
        }
      }
      return obj;
    });
    pageFormByRecord.value.total = res.total;
  }
  async function getDataByHz() {
    let queryData = {
      supplierId: companyId,
      limit: pageFormByHz.value.limit,
      size: pageFormByHz.value.size,
    };
    const res = await getProjectLedger(queryData);
    hzList.value = res.list.map((item) => {
      const obj = { ...item };
      for (let key in obj) {
        if (obj[key] === null || obj[key] === undefined) {
          obj[key] = '-';
        }
      }
      return obj;
    });
    pageFormByHz.value.total = res.total;
  }
  function changeTagTabs() {
    if (tagTabs.value === 1) {
      // 标签
      getDataByTag();
    } else {
      // 历史标签
      getDataByHistoryTag();
    }
  }
  async function confirmDelByTag(id: string) {
    if (tagTabs.value === 1) {
      // 移除
      await removeLabel(id);
      getDataByTag();
    } else {
      // 删除
      await delLabel(id);
      getDataByHistoryTag();
    }
  }

  // 新增标签
  let isShowAddLabel = ref(false);
  let addLabelForm = ref({
    name: '',
    description: '',
  });
  function openAddLabel() {
    isShowAddLabel.value = true;
    addLabelForm.value = {
      name: '',
      description: '',
    };
  }
  async function saveLabelData() {
    try {
      const checked = await addLabelRef.value.validate();
      if (checked) {
        let queryData = {
          companyId: companyId,
          name: addLabelForm.value.name,
          description: addLabelForm.value.description,
        };
        const res = await addLabel(queryData);
        message.success('新增标签成功');
        isShowAddLabel.value = false;
        getDataByTag();
      }
    } finally {
    }
  }

  // 下载报告
  const downloadSingle = async (row: any) => {
    try {
      if (!row.id) return;
      const resultStream = await downloadRecordPdfApi(row.id);
      if (resultStream.data) {
        saveAs(resultStream.data, `${row.companyName}评分报告_${row.createDate}`);
      }
    } catch (error) {
      console.log(error);
    }
  };
  // 报告结果预览弹窗
  const scoreResultDialog = ref<boolean>(false);
  // 行数据缓存
  const rowTemp = ref(null);
  // 当前查看的pdf url地址
  const pdfUrl = ref<string>('');
  // 查看报告结果 先获取报告链接
  async function viewScoreResult(row: any) {
    try {
      if (!row.id) return;
      rowTemp.value = row;
      const resultStream = await downloadRecordPdfApi(row.id);
      if (resultStream.data) {
        const url = URL.createObjectURL(resultStream.data);
        pdfUrl.value = url;
        // scoreResultDialog.value = true;
        scoreResultOk()
      }
    } catch (error) {}
  }
  // 预览完成
  async function scoreResultOk() {
    await downloadSingle(rowTemp.value);
  }
  function scoreResultClose(flag) {
    scoreResultDialog.value = flag;
    rowTemp.value = null;
    URL.revokeObjectURL(pdfUrl.value);
    pdfUrl.value = '';
  }
</script>
<style lang="less" scoped>
  :deep(.ant-tabs) {
    min-width: 1240px;
    overflow-x: scroll;
  }
  .engineeringSourcing {
    .remarks {
      width: 100%;
      height: 36px;
      border-radius: 2px;
      background: #f5f7fa;
      line-height: 36px;
      font-size: 12px;
      padding: 0 16px;
      margin-top: 8px;
    }
    .myCard {
      border: 1px solid #e4e7ed;
      margin-top: 16px;
      .myTab {
        display: flex;
        width: 100%;
        height: 40px;
        .tabItem {
          flex: 1;
          text-align: center;
          line-height: 40px;
          background: #f5f7fa;
          cursor: pointer;
          box-sizing: border-box;
        }
        .tabItem.active {
          border-top: 2px solid #c11a20;
          background: #f9e9e9;
          color: #c11a20;
        }
      }
    }
    .myForm {
      padding-left: 68px;
    }
    .addDiv {
      display: flex;
      width: 100%;
      height: 38px;
      background: #f5f7fa;
      padding: 0 16px;
      line-height: 38px;
      margin-top: 12px;
      position: relative;
      .myAddBtn {
        width: 14px;
        height: 14px;
        border-radius: 2px;
        background: #c11a20;
        text-align: center;
        line-height: 14px;
        color: #ffffff;
        margin-top: 12px;
        margin-right: 4px;
      }
      .myRadio {
        position: absolute;
        right: 16px;
        top: 7px;
      }
    }
    .myEditBtn {
      margin-left: 8px;
      color: #c11a20;
      cursor: pointer;
    }
    .list-top {
      .list-count {
        margin-top: 5px;
      }
      display: flex;
      justify-content: space-between;
    }
    .data-list {
      .data-item {
        height: 154px;
        display: flex;
        padding: 16px 16px;
        border-bottom: 1px solid #dcdfe6;
        .company-icon {
          margin-right: 24px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 78px;
          height: 100%;
          img {
            width: 78px;
          }
        }
        .company-info {
          width: calc(100% - 102px);
          .name {
            color: #303133;
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 8px;
          }
          .state {
            width: 40px;
            height: 22px;
            border-radius: 2px;
            background: #e8f7ed;
            text-align: center;
            line-height: 22px;
            font-size: 13px;
            color: #16af44;
            margin-bottom: 12px;
          }
          .info {
            display: flex;
            flex-wrap: wrap;
            .info-item {
              font-size: 13px;
              margin-right: 32px;
              margin-bottom: 8px;
              .info-name {
                color: #909399;
              }
              .info-value1 {
                color: #303133;
              }
              .info-value2 {
                color: #1473dc;
              }
            }
          }
        }
      }
    }
    .mySearchButton {
      margin-left: 102px;
      margin-right: 12px;
    }
  }
  :deep(.ant-tabs-nav) {
    margin-bottom: 0;
  }
  :deep(.ant-tabs-nav-wrap) {
    padding: 0 20px;
    background: #ffffff;
  }
  :deep(.ant-form-item) {
    margin-bottom: 8px;
  }
  .addTagBtn {
    border: 1px solid #1473dc;
    padding: 5px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #1473dc;
    float: right;
    cursor: pointer;
  }
  #companyIframe {
    height: calc(100vh - 246px);
  }
  .myFixed {
    position: fixed;
    z-index: 10;
    width: calc(100% - 258px);
    background: #ffffff;
    .iframeDetail {
      height: calc(100vh - 246px) !important;
    }
  }
</style>
